
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Robot Page</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/tables.css" />" />
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/button.css" />" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>





$(function() {
	$("#dialogDelete").dialog({
		 resizable: false,
		 height:230,
		 width:500,
		autoOpen : false,
		show : {
			effect : "blind",
			duration : 1000
		},
		hide : {
			effect : "scale",
			duration : 1000
		},
		buttons: {
			 "Delete Robot": function() {
			 $( this ).dialog( "close" );
			 },
			 Cancel: function() {
			 $( this ).dialog( "close" );
			 }
		}
	});
	$("#buttonDelete").click(function() {
		$("#dialogDelete").dialog("open");
	});
});

$(function() {
	$("#dialogCreate").dialog({
		resizable: false,
		 height:400,
		 width:500,
		autoOpen : false,
		show : {
			effect : "clip",
			duration : 1000
		},
		hide : {
			effect : "scale",
			duration : 1000
		},
		 buttons: {
			 "Create new Robot": function() {
			 	    var e = document.getElementById("weaponSelect");
					var weaponValue = e.options[e.selectedIndex].value;
					var e = document.getElementById("defenseSelect");
					var defenseValue = e.options[e.selectedIndex].value;
			 	alert("!hola");
			 	alert($(nameRobot).val());
			 	alert(weaponValue);
			 	alert(defenseValue);
				  $.post("http://127.0.0.1:8080/fight-robot/robot-service/createRobot", 
				  	{ robotName:$(nameRobot).val(), robotLife: $(lifeRobot).val(),robotAgressivity: $(agressivityRobot).val(), robotWeapon: weaponValue,robotDeffense:defenseValue } );

				
				   $( this ).dialog( "close" );
			 },
			 Cancel: function() {
			 $( this ).dialog( "close" );
			 }
		},
			close: function() {

        		   location.reload(true);
    		} 
	});
	$("#buttonCreate").click(function() {
		$("#dialogCreate").dialog("open");
	});
});

	function displayRobot() {
		var e = document.getElementById("robotSelect");
		var robotValue = e.options[e.selectedIndex].value;

		$
				.get(
						'http://127.0.0.1:8080/fight-robot/robot-service/getRobot?robotId='
								+ robotValue,
						function(data) {
							if (!data || data === "") {
								// error
								return;
							}
							var foundRobot;
							try {
								foundRobot = jQuery.parseJSON(data);
							} catch (e) {
								// error
								return;
							}
							var table = document.getElementById('robotTableID');
							var tableWeapon = document
									.getElementById('weaponTableID');
							var tableDeffense = document
									.getElementById('deffenseTableID');

							cells = table.getElementsByTagName('td');

							table.rows[1].cells[1].innerHTML = foundRobot.idRobot;
							table.rows[2].cells[1].innerHTML = foundRobot.name;
							table.rows[3].cells[1].innerHTML = foundRobot.life;
							table.rows[4].cells[1].innerHTML = foundRobot.aggressivity;

							$
									.each(
											foundRobot.robotWeaponList,
											function(index, value) {

												tableWeapon.rows[1].cells[0].innerHTML = value.idWeapon;
												tableWeapon.rows[1].cells[1].innerHTML = value.name;
												tableWeapon.rows[1].cells[2].innerHTML = value.power;
												tableWeapon.rows[1].cells[3].innerHTML = value.hits;

											});

							$
									.each(
											foundRobot.robotDeffenseList,
											function(index, value) {

												tableDeffense.rows[1].cells[0].innerHTML = value.idDeffense;
												tableDeffense.rows[1].cells[1].innerHTML = value.name;
												tableDeffense.rows[1].cells[2].innerHTML = value.power;
												tableDeffense.rows[1].cells[3].innerHTML = value.hits;

											});

						}, "text");
	}
</script>
</head>
<body>
	<center>
		<select name='robotSelect' id='robotSelect' onchange="displayRobot()">
			<option value="${robotSelected}" selected>${selected}</option>
			<c:forEach var="robot" items="${robotMap}">
				<option value="${robot.key}">${robot.value}</option>
			</c:forEach>
		</select></br>

		<table id='robotTableID'>
			<tr>
				<th>Atribute</th>
				<th>Value</th>
			</tr>
			<tr>
				<th>Id</th>
				<td></td>
			</tr>
			<tr>
				<th>Name</th>
				<td></td>
			</tr>
			<tr>
				<th>Life</th>
				<td></td>
			</tr>
			<tr>
				<th>Aggressivity</th>
				<td></td>
			</tr>

		</table>

		<table id='weaponTableID'>
			<thead>
				<tr>
					<th>Weapon Id</th>
					<th>Weapon Name</th>
					<th>Weapon Power</th>
					<th>Weapon Hits</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>

		<table id='deffenseTableID'>
			<thead>
				<tr>
					<th>Defense Id</th>
					<th>Defense Name</th>
					<th>Defense Power</th>
					<th>Defense Hits</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>

		<button type="button" id="buttonCreate" class="button medium brown">Create
			Robot</button>
		<button type="button" id="buttonEdit" class="button medium brown">Edit
			Robot</button>
		<button type="button" id="buttonDelete" class="button medium brown">Delete
			Robot</button>
	</center>
	
<!-- <button id="opener">Open Dialog</button> -->
</body>
<div id="dialogDelete" title="Delete Robot">
	<p>Are you sure you want to proceed? Changes could not be undone!</p>

</div>

<!-- Dialog Create -->
<div id="dialogCreate" title="Create new Robot">
	<form>
		<fieldset>
			<label for="nameRobot">Name </label> <input type="text" name="nameRobot"
				id="nameRobot" class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="lifeRobot">Life</label> <input type="text" name="lifeRobot" id="lifeRobot"
				value="" class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="agressivityRobot">Agressivity  </label> <input type="text" name="aggressivityRobot" id="agressivityRobot"
				value="" class="text ui-widget-content ui-corner-all" /> <br>

 		 </br>
 		 Weapons:
		<select name='weaponSelect' id='weaponSelect'>
			<c:forEach var="weapon" items="${weaponRobot}">
				<option value="${weapon}">${weapon}</option>
			</c:forEach>
		</select>
		  </br>
		  </br>

		Defenses
		<select name='defenseSelect' id='defenseSelect'>
			<c:forEach var="defense" items="${defenseRobot}">
				<option value="${defense}">${defense}</option>
			</c:forEach>
		</select>


		</fieldset>

	

	</form>
</div>
<!--  -->





</html>